import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Slider } from '@/components/ui/slider';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { useGameStore } from '@/store/game-store';
import { 
  Settings, 
  Database, 
  Users, 
  BarChart3,
  Shield,
  Zap,
  Coins,
  Sword,
  Star,
  AlertTriangle,
  CheckCircle,
  XCircle,
  RefreshCw,
  Download,
  Upload,
  Trash2,
  Edit,
  Save,
  RotateCcw
} from 'lucide-react';

interface GameConfig {
  expMultiplier: number;
  goldMultiplier: number;
  battleDifficulty: number;
  maxLevel: number;
  cultivationSpeed: number;
  itemDropRate: number;
  friendLimit: number;
  chatMessageLimit: number;
  autoSaveInterval: number;
  debugMode: boolean;
  maintenanceMode: boolean;
}

interface SystemStats {
  totalPlayers: number;
  activeToday: number;
  totalBattles: number;
  totalItems: number;
  totalQuests: number;
  averageLevel: number;
  topPlayer: string;
  systemUptime: string;
}

export function AdminPage() {
  const { player, gold, updatePlayer, addGold } = useGameStore();
  
  // 管理员验证状态
  const [isAdmin, setIsAdmin] = useState(false);
  const [adminPassword, setAdminPassword] = useState('');
  const [loginAttempts, setLoginAttempts] = useState(0);

  // 游戏配置状态
  const [gameConfig, setGameConfig] = useState<GameConfig>({
    expMultiplier: 1.0,
    goldMultiplier: 1.0,
    battleDifficulty: 1.0,
    maxLevel: 100,
    cultivationSpeed: 1.0,
    itemDropRate: 0.3,
    friendLimit: 50,
    chatMessageLimit: 100,
    autoSaveInterval: 30,
    debugMode: false,
    maintenanceMode: false
  });

  // 系统统计数据
  const [systemStats, setSystemStats] = useState<SystemStats>({
    totalPlayers: 1247,
    activeToday: 89,
    totalBattles: 5632,
    totalItems: 234,
    totalQuests: 45,
    averageLevel: 23.5,
    topPlayer: '无极剑圣',
    systemUptime: '7天 12小时 34分钟'
  });

  // 操作状态
  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'success' | 'error'>('idle');
  const [selectedTab, setSelectedTab] = useState('config');

  // 管理员登录
  const handleAdminLogin = () => {
    const correctPassword = 'admin123'; // 实际项目中应该使用更安全的验证方式
    
    if (adminPassword === correctPassword) {
      setIsAdmin(true);
      setLoginAttempts(0);
    } else {
      setLoginAttempts(prev => prev + 1);
      setAdminPassword('');
      
      if (loginAttempts >= 2) {
        alert('登录失败次数过多，请稍后再试');
      }
    }
  };

  // 保存配置
  const saveConfig = async () => {
    setSaveStatus('saving');
    
    try {
      // 模拟保存到服务器
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 保存到本地存储
      localStorage.setItem('gameConfig', JSON.stringify(gameConfig));
      
      setSaveStatus('success');
      setTimeout(() => setSaveStatus('idle'), 2000);
    } catch (error) {
      setSaveStatus('error');
      setTimeout(() => setSaveStatus('idle'), 2000);
    }
  };

  // 重置配置
  const resetConfig = () => {
    setGameConfig({
      expMultiplier: 1.0,
      goldMultiplier: 1.0,
      battleDifficulty: 1.0,
      maxLevel: 100,
      cultivationSpeed: 1.0,
      itemDropRate: 0.3,
      friendLimit: 50,
      chatMessageLimit: 100,
      autoSaveInterval: 30,
      debugMode: false,
      maintenanceMode: false
    });
  };

  // 导出数据
  const exportData = () => {
    const data = {
      gameConfig,
      systemStats,
      exportTime: new Date().toISOString()
    };
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `cultivation-game-config-${new Date().toISOString().split('T')[0]}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  // 玩家数据操作
  const givePlayerReward = (type: 'exp' | 'gold' | 'level', amount: number) => {
    switch (type) {
      case 'exp':
        updatePlayer({ experience: player.experience + amount });
        break;
      case 'gold':
        addGold(amount);
        break;
      case 'level':
        updatePlayer({ level: Math.min(player.level + amount, gameConfig.maxLevel) });
        break;
    }
  };

  // 加载配置
  useEffect(() => {
    const savedConfig = localStorage.getItem('gameConfig');
    if (savedConfig) {
      try {
        setGameConfig(JSON.parse(savedConfig));
      } catch (error) {
        console.error('Failed to load game config:', error);
      }
    }
  }, []);

  // 如果不是管理员，显示登录界面
  if (!isAdmin) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 flex items-center justify-center">
        <Card className="w-full max-w-md bg-slate-800/50 border-slate-700">
          <CardHeader>
            <CardTitle className="text-2xl text-center text-orange-400 flex items-center justify-center gap-2">
              <Shield className="h-6 w-6" />
              管理员登录
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="password" className="text-slate-300">管理员密码</Label>
              <Input
                id="password"
                type="password"
                value={adminPassword}
                onChange={(e) => setAdminPassword(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleAdminLogin()}
                className="bg-slate-700 border-slate-600 text-slate-100"
                placeholder="请输入管理员密码"
              />
            </div>
            
            {loginAttempts > 0 && (
              <Alert className="border-red-600 bg-red-900/20">
                <AlertTriangle className="h-4 w-4 text-red-400" />
                <AlertDescription className="text-red-400">
                  密码错误，剩余尝试次数：{3 - loginAttempts}
                </AlertDescription>
              </Alert>
            )}
            
            <Button 
              onClick={handleAdminLogin}
              disabled={loginAttempts >= 3}
              className="w-full bg-orange-600 hover:bg-orange-700"
            >
              <Shield className="h-4 w-4 mr-2" />
              登录
            </Button>
            
            <div className="text-xs text-slate-500 text-center">
              提示：默认密码为 admin123
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* 页面标题 */}
        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader>
            <CardTitle className="text-2xl text-center text-orange-400 flex items-center justify-center gap-2">
              <Settings className="h-6 w-6" />
              管理员控制面板
              <Settings className="h-6 w-6" />
            </CardTitle>
            <div className="flex justify-center gap-2">
              <Badge variant="outline" className="text-green-400 border-green-400">
                系统正常运行
              </Badge>
              <Badge variant="outline" className="text-blue-400 border-blue-400">
                管理员: {player.name}
              </Badge>
            </div>
          </CardHeader>
        </Card>

        <Tabs value={selectedTab} onValueChange={setSelectedTab} className="w-full">
          <TabsList className="grid w-full grid-cols-4 bg-slate-700">
            <TabsTrigger value="config" className="text-slate-300">
              <Settings className="h-4 w-4 mr-2" />
              游戏配置
            </TabsTrigger>
            <TabsTrigger value="players" className="text-slate-300">
              <Users className="h-4 w-4 mr-2" />
              玩家管理
            </TabsTrigger>
            <TabsTrigger value="stats" className="text-slate-300">
              <BarChart3 className="h-4 w-4 mr-2" />
              系统统计
            </TabsTrigger>
            <TabsTrigger value="tools" className="text-slate-300">
              <Database className="h-4 w-4 mr-2" />
              系统工具
            </TabsTrigger>
          </TabsList>

          {/* 游戏配置 */}
          <TabsContent value="config" className="space-y-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* 基础配置 */}
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-slate-100 flex items-center gap-2">
                    <Zap className="h-5 w-5 text-yellow-400" />
                    基础参数配置
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label className="text-slate-300">经验倍率: {gameConfig.expMultiplier}x</Label>
                    <Slider
                      value={[gameConfig.expMultiplier]}
                      onValueChange={([value]) => setGameConfig(prev => ({ ...prev, expMultiplier: value }))}
                      max={5}
                      min={0.1}
                      step={0.1}
                      className="mt-2"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label className="text-slate-300">金币倍率: {gameConfig.goldMultiplier}x</Label>
                    <Slider
                      value={[gameConfig.goldMultiplier]}
                      onValueChange={([value]) => setGameConfig(prev => ({ ...prev, goldMultiplier: value }))}
                      max={5}
                      min={0.1}
                      step={0.1}
                      className="mt-2"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label className="text-slate-300">战斗难度: {gameConfig.battleDifficulty}x</Label>
                    <Slider
                      value={[gameConfig.battleDifficulty]}
                      onValueChange={([value]) => setGameConfig(prev => ({ ...prev, battleDifficulty: value }))}
                      max={3}
                      min={0.5}
                      step={0.1}
                      className="mt-2"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label className="text-slate-300">修炼速度: {gameConfig.cultivationSpeed}x</Label>
                    <Slider
                      value={[gameConfig.cultivationSpeed]}
                      onValueChange={([value]) => setGameConfig(prev => ({ ...prev, cultivationSpeed: value }))}
                      max={3}
                      min={0.1}
                      step={0.1}
                      className="mt-2"
                    />
                  </div>
                </CardContent>
              </Card>

              {/* 系统配置 */}
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-slate-100 flex items-center gap-2">
                    <Settings className="h-5 w-5 text-blue-400" />
                    系统配置
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label className="text-slate-300">等级上限</Label>
                    <Input
                      type="number"
                      value={gameConfig.maxLevel}
                      onChange={(e) => setGameConfig(prev => ({ ...prev, maxLevel: parseInt(e.target.value) || 100 }))}
                      className="bg-slate-700 border-slate-600 text-slate-100"
                      min={1}
                      max={999}
                    />
                  </div>

                  <div className="space-y-2">
                    <Label className="text-slate-300">物品掉落率: {(gameConfig.itemDropRate * 100).toFixed(0)}%</Label>
                    <Slider
                      value={[gameConfig.itemDropRate]}
                      onValueChange={([value]) => setGameConfig(prev => ({ ...prev, itemDropRate: value }))}
                      max={1}
                      min={0}
                      step={0.01}
                      className="mt-2"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label className="text-slate-300">好友上限</Label>
                    <Input
                      type="number"
                      value={gameConfig.friendLimit}
                      onChange={(e) => setGameConfig(prev => ({ ...prev, friendLimit: parseInt(e.target.value) || 50 }))}
                      className="bg-slate-700 border-slate-600 text-slate-100"
                      min={1}
                      max={200}
                    />
                  </div>

                  <div className="space-y-2">
                    <Label className="text-slate-300">自动保存间隔(秒)</Label>
                    <Input
                      type="number"
                      value={gameConfig.autoSaveInterval}
                      onChange={(e) => setGameConfig(prev => ({ ...prev, autoSaveInterval: parseInt(e.target.value) || 30 }))}
                      className="bg-slate-700 border-slate-600 text-slate-100"
                      min={10}
                      max={300}
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <Label className="text-slate-300">调试模式</Label>
                    <Switch
                      checked={gameConfig.debugMode}
                      onCheckedChange={(checked) => setGameConfig(prev => ({ ...prev, debugMode: checked }))}
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <Label className="text-slate-300">维护模式</Label>
                    <Switch
                      checked={gameConfig.maintenanceMode}
                      onCheckedChange={(checked) => setGameConfig(prev => ({ ...prev, maintenanceMode: checked }))}
                    />
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 配置操作按钮 */}
            <Card className="bg-slate-800/50 border-slate-700">
              <CardContent className="pt-6">
                <div className="flex flex-wrap gap-3">
                  <Button 
                    onClick={saveConfig}
                    disabled={saveStatus === 'saving'}
                    className="bg-green-600 hover:bg-green-700"
                  >
                    {saveStatus === 'saving' ? (
                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
                    ) : (
                      <Save className="h-4 w-4 mr-2" />
                    )}
                    保存配置
                  </Button>

                  <Button 
                    onClick={resetConfig}
                    variant="outline"
                    className="border-slate-600 text-slate-300 hover:bg-slate-700"
                  >
                    <RotateCcw className="h-4 w-4 mr-2" />
                    重置配置
                  </Button>

                  <Button 
                    onClick={exportData}
                    variant="outline"
                    className="border-slate-600 text-slate-300 hover:bg-slate-700"
                  >
                    <Download className="h-4 w-4 mr-2" />
                    导出配置
                  </Button>

                  {saveStatus === 'success' && (
                    <Badge className="bg-green-600 text-white">
                      <CheckCircle className="h-3 w-3 mr-1" />
                      保存成功
                    </Badge>
                  )}

                  {saveStatus === 'error' && (
                    <Badge className="bg-red-600 text-white">
                      <XCircle className="h-3 w-3 mr-1" />
                      保存失败
                    </Badge>
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 玩家管理 */}
          <TabsContent value="players" className="space-y-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* 当前玩家信息 */}
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-slate-100 flex items-center gap-2">
                    <Users className="h-5 w-5 text-green-400" />
                    当前玩家信息
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="text-center space-y-2">
                    <div className="text-4xl">{player.avatar}</div>
                    <h3 className="text-xl font-semibold text-slate-100">{player.name}</h3>
                    <Badge variant="outline" className="text-amber-400 border-amber-400">
                      {player.realm.name}
                    </Badge>
                  </div>

                  <Separator className="bg-slate-600" />

                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-slate-400">等级:</span>
                      <span className="text-slate-100">{player.level}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-slate-400">经验:</span>
                      <span className="text-slate-100">{player.experience}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-slate-400">金币:</span>
                      <span className="text-yellow-400">{gold}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-slate-400">攻击力:</span>
                      <span className="text-red-400">{player.attack}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-slate-400">防御力:</span>
                      <span className="text-blue-400">{player.defense}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-slate-400">速度:</span>
                      <span className="text-green-400">{player.speed}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* 玩家操作 */}
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-slate-100 flex items-center gap-2">
                    <Edit className="h-5 w-5 text-purple-400" />
                    玩家数据操作
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <div className="flex gap-2">
                      <Button
                        onClick={() => givePlayerReward('exp', 1000)}
                        className="flex-1 bg-green-600 hover:bg-green-700"
                        size="sm"
                      >
                        <Star className="h-3 w-3 mr-1" />
                        +1000经验
                      </Button>
                      <Button
                        onClick={() => givePlayerReward('gold', 1000)}
                        className="flex-1 bg-yellow-600 hover:bg-yellow-700"
                        size="sm"
                      >
                        <Coins className="h-3 w-3 mr-1" />
                        +1000金币
                      </Button>
                    </div>

                    <div className="flex gap-2">
                      <Button
                        onClick={() => givePlayerReward('level', 1)}
                        className="flex-1 bg-purple-600 hover:bg-purple-700"
                        size="sm"
                      >
                        <Zap className="h-3 w-3 mr-1" />
                        +1等级
                      </Button>
                      <Button
                        onClick={() => updatePlayer({ health: player.maxHealth, mana: player.maxMana })}
                        className="flex-1 bg-cyan-600 hover:bg-cyan-700"
                        size="sm"
                      >
                        <Shield className="h-3 w-3 mr-1" />
                        完全恢复
                      </Button>
                    </div>

                    <Separator className="bg-slate-600" />

                    <div className="space-y-2">
                      <Label className="text-slate-300 text-sm">快速操作</Label>
                      <div className="grid grid-cols-2 gap-2">
                        <Button
                          onClick={() => {
                            updatePlayer({ 
                              level: 50,
                              experience: 0,
                              attack: player.attack + 50,
                              defense: player.defense + 25,
                              speed: player.speed + 25
                            });
                            addGold(10000);
                          }}
                          variant="outline"
                          className="border-slate-600 text-slate-300 hover:bg-slate-700"
                          size="sm"
                        >
                          设为50级
                        </Button>
                        <Button
                          onClick={() => {
                            updatePlayer({ 
                              level: 1,
                              experience: 0,
                              attack: 10,
                              defense: 5,
                              speed: 5,
                              health: 100,
                              maxHealth: 100,
                              mana: 50,
                              maxMana: 50
                            });
                          }}
                          variant="outline"
                          className="border-red-600 text-red-400 hover:bg-red-900/20"
                          size="sm"
                        >
                          重置角色
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* 系统统计 */}
          <TabsContent value="stats" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <Card className="bg-slate-800/50 border-slate-700">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-400">总玩家数</p>
                      <p className="text-2xl font-bold text-slate-100">{systemStats.totalPlayers.toLocaleString()}</p>
                    </div>
                    <Users className="h-8 w-8 text-blue-400" />
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-slate-800/50 border-slate-700">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-400">今日活跃</p>
                      <p className="text-2xl font-bold text-slate-100">{systemStats.activeToday}</p>
                    </div>
                    <Zap className="h-8 w-8 text-green-400" />
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-slate-800/50 border-slate-700">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-400">总战斗数</p>
                      <p className="text-2xl font-bold text-slate-100">{systemStats.totalBattles.toLocaleString()}</p>
                    </div>
                    <Sword className="h-8 w-8 text-red-400" />
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-slate-800/50 border-slate-700">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-400">平均等级</p>
                      <p className="text-2xl font-bold text-slate-100">{systemStats.averageLevel}</p>
                    </div>
                    <Star className="h-8 w-8 text-yellow-400" />
                  </div>
                </CardContent>
              </Card>
            </div>

            <Card className="bg-slate-800/50 border-slate-700">
              <CardHeader>
                <CardTitle className="text-slate-100 flex items-center gap-2">
                  <BarChart3 className="h-5 w-5 text-purple-400" />
                  系统详细信息
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-slate-300">游戏数据</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-slate-400">物品总数:</span>
                        <span className="text-slate-100">{systemStats.totalItems}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-400">任务总数:</span>
                        <span className="text-slate-100">{systemStats.totalQuests}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-400">最强玩家:</span>
                        <span className="text-yellow-400">{systemStats.topPlayer}</span>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-slate-300">系统状态</h4>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-slate-400">运行时间:</span>
                        <span className="text-green-400">{systemStats.systemUptime}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-400">系统状态:</span>
                        <Badge className="bg-green-600 text-white">正常</Badge>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-400">维护模式:</span>
                        <Badge className={gameConfig.maintenanceMode ? "bg-red-600" : "bg-green-600"}>
                          {gameConfig.maintenanceMode ? "开启" : "关闭"}
                        </Badge>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 系统工具 */}
          <TabsContent value="tools" className="space-y-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* 数据管理工具 */}
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-slate-100 flex items-center gap-2">
                    <Database className="h-5 w-5 text-cyan-400" />
                    数据管理工具
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <Button 
                      onClick={exportData}
                      className="w-full bg-blue-600 hover:bg-blue-700"
                    >
                      <Download className="h-4 w-4 mr-2" />
                      导出游戏数据
                    </Button>

                    <Button 
                      variant="outline"
                      className="w-full border-slate-600 text-slate-300 hover:bg-slate-700"
                    >
                      <Upload className="h-4 w-4 mr-2" />
                      导入游戏数据
                    </Button>

                    <Separator className="bg-slate-600" />

                    <Button 
                      onClick={() => {
                        if (confirm('确定要清空所有游戏数据吗？此操作不可恢复！')) {
                          localStorage.clear();
                          window.location.reload();
                        }
                      }}
                      variant="outline"
                      className="w-full border-red-600 text-red-400 hover:bg-red-900/20"
                    >
                      <Trash2 className="h-4 w-4 mr-2" />
                      清空所有数据
                    </Button>

                    <Button 
                      onClick={() => window.location.reload()}
                      variant="outline"
                      className="w-full border-slate-600 text-slate-300 hover:bg-slate-700"
                    >
                      <RefreshCw className="h-4 w-4 mr-2" />
                      重启游戏
                    </Button>
                  </div>
                </CardContent>
              </Card>

              {/* 系统监控 */}
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-slate-100 flex items-center gap-2">
                    <BarChart3 className="h-5 w-5 text-green-400" />
                    系统监控
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-slate-400 text-sm">内存使用:</span>
                      <Badge className="bg-green-600">正常</Badge>
                    </div>

                    <div className="flex justify-between items-center">
                      <span className="text-slate-400 text-sm">数据库状态:</span>
                      <Badge className="bg-green-600">连接正常</Badge>
                    </div>

                    <div className="flex justify-between items-center">
                      <span className="text-slate-400 text-sm">API响应:</span>
                      <Badge className="bg-green-600">&lt; 100ms</Badge>
                    </div>

                    <div className="flex justify-between items-center">
                      <span className="text-slate-400 text-sm">错误日志:</span>
                      <Badge className="bg-yellow-600">3 警告</Badge>
                    </div>

                    <Separator className="bg-slate-600" />

                    <div className="space-y-2">
                      <Label className="text-slate-300 text-sm">最近操作日志</Label>
                      <ScrollArea className="h-32 bg-slate-900/50 rounded p-2">
                        <div className="space-y-1 text-xs">
                          <div className="text-slate-400">
                            [15:52] 管理员登录成功
                          </div>
                          <div className="text-slate-400">
                            [15:51] 玩家 {player.name} 完成修炼
                          </div>
                          <div className="text-slate-400">
                            [15:50] 系统自动保存数据
                          </div>
                          <div className="text-slate-400">
                            [15:49] 新玩家注册
                          </div>
                          <div className="text-slate-400">
                            [15:48] 战斗系统正常运行
                          </div>
                        </div>
                      </ScrollArea>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 快速操作面板 */}
            <Card className="bg-slate-800/50 border-slate-700">
              <CardHeader>
                <CardTitle className="text-slate-100 flex items-center gap-2">
                  <Zap className="h-5 w-5 text-yellow-400" />
                  快速操作面板
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                  <Button
                    onClick={() => {
                      // 模拟发送系统公告
                      alert('系统公告已发送：欢迎来到修仙世界！');
                    }}
                    className="bg-purple-600 hover:bg-purple-700"
                    size="sm"
                  >
                    发送公告
                  </Button>

                  <Button
                    onClick={() => {
                      setGameConfig(prev => ({ ...prev, maintenanceMode: !prev.maintenanceMode }));
                    }}
                    className={gameConfig.maintenanceMode ? "bg-green-600 hover:bg-green-700" : "bg-red-600 hover:bg-red-700"}
                    size="sm"
                  >
                    {gameConfig.maintenanceMode ? "退出维护" : "进入维护"}
                  </Button>

                  <Button
                    onClick={() => {
                      // 模拟重置排行榜
                      alert('排行榜已重置');
                    }}
                    variant="outline"
                    className="border-slate-600 text-slate-300 hover:bg-slate-700"
                    size="sm"
                  >
                    重置排行榜
                  </Button>

                  <Button
                    onClick={() => {
                      // 模拟清理缓存
                      alert('系统缓存已清理');
                    }}
                    variant="outline"
                    className="border-slate-600 text-slate-300 hover:bg-slate-700"
                    size="sm"
                  >
                    清理缓存
                  </Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        {/* 退出管理员模式 */}
        <Card className="bg-slate-800/50 border-slate-700">
          <CardContent className="pt-6">
            <div className="flex justify-center">
              <Button
                onClick={() => {
                  setIsAdmin(false);
                  setAdminPassword('');
                }}
                variant="outline"
                className="border-red-600 text-red-400 hover:bg-red-900/20"
              >
                <XCircle className="h-4 w-4 mr-2" />
                退出管理员模式
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
